<template>
  <view class="ali">
    <view class="ali_state">
      <block v-for="(item,i) in datas" :key="i">
        <view class="State_Four">
          <view class="FourBox">
            <text :class="[i == 0?'noline':'']" class="line"/>
            <!-- =====如果不够，可以再方法和过滤器中同时添加判断-或者如下的-[v-else-if]操作 -->
            <!-- <text class="ali_top_icon" style="margin: 0 0;" v-else-if="item.station.includes('丰巢智能快递柜') && i!= datas.length-1">待</text> -->
            <text v-if="Type(item.station) == true && i!= datas.length-1" :class="[item.station.includes('签收')?'isOk':'']" class="ali_top_icon" style="margin: 0 0;">{{ item.station | Type }}</text>
            <view v-else class="ali_top_icons" style="margin: 0 0;">
              <text :class="[i == 0?'noline':'']" class="line"/>
              <text class="ali_top_iconss"/>
              <text :class="[i == 0?'noline':'']" class="line"/>
            </view>
            <text :class="[i == datas.length -1?'noline':'']" class="line"/>
          </view>
          <view class="station">
            <text v-if="i == datas.length-1" class="a14">已发货</text>
            <text v-else class="a14">{{ item.station }}</text>
            <text class="a12" style="padding-top: 10upx;">{{ item.time }}</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default{
  // 过滤返回关键字
  filters: {
    Type(item) {
      let Info
      const Phone = /\d{11}/
      if (Phone.test(item) && item.includes('正在派')) {
        Info = '派'
      } else if (item.includes('已收取快件')) {
        Info = '揽'
      } else if (item.includes('营业')) {
        Info = '运'
      } else if (item.includes('丰巢智能快递柜')) {
        Info = '待'
      } else if (item.includes('签收')) {
        Info = '收'
      } else {
        Info = ''
      }
      return Info
    }
  },
  props: ['datas'],
  data() {
    return {

    }
  },
  methods: {
    // 判断哪个该展示关键字--还是默认
    Type(item) {
      let Info
      const Phone = /\d{11}/
      if (Phone.test(item) && item.includes('正在派')) {
        Info = true
      } else if (item.includes('已收取快件')) {
        Info = true
      } else if (item.includes('营业')) {
        Info = true
      } else if (item.includes('丰巢智能快递柜')) {
        Info = true
      } else if (item.includes('签收')) {
        Info = true
      } else {
        Info = false
      }
      return Info
    }
  }
}
</script>

<style>
	.isOk{
		background-color: #F0AD4E !important;
	}
	.ali_top_iconss{
		width: 12upx;
		height: 12upx;
		display: block;
		background-color: #999;
		padding-right: 2upx;
		border-radius: 50%;
	}
	.noline{
		background-color: #fff !important;
	}
	.State_Four{
		display: flex;
		/* border: 1upx solid red; */
	}
	.FourBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 24upx;
	}
	.line{
		width: 2upx;
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #999;
	}
	/* ============= */
	.station{
		display: flex;
		flex-direction: column;
		width: 90%;
		padding: 24upx 0;
	}
	.borders{
		border-bottom: 1upx solid #F2F2F2;
		padding: 24upx 0;
	}
	.ali_top_icons{
		width: 46upx;
		height: 46upx;
		display: block;
		background-color: #FFF;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-content: center;
	}
	.ali_top_icon{
		width: 46upx;
		height: 46upx;
		display: block;
		background-color: #83AECF;
		color: #fff;
		font-size: 28upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20upx;
	}
	.ali_top{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	/* ========公共========= */
	.a14{
		font-size: 28upx;
		color: #000000;
	}
	.a12{
		font-size: 24upx;
		color: #999;
	}
	.ali{
		/* width: 100%; */
		/* border: 1upx solid #F76260; */
		background-color: #FFFFFF;
		margin: 24upx;
		border-radius:18upx;
		padding: 0 24upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}
</style>
